<template>
  <view class="flex flex-column justify-between">
    <view>
      <view class="sticky z-4" :style="{ top: `${top}px` }">
        <u-tabs :bold="false" :current="tabsCurrent" :is-scroll="false" :list="[{name: '报修内容'}, {name: '维修详情'}]" active-color="#2D8CF0"
                bar-height="10" :bar-width="350" duration="0" @change="changTabs"></u-tabs>
        <u-line color="#CCCCCC" length="94%" margin="-5rpx 0 0 20rpx" />
      </view>
      <view class="mt-20" v-if="tabsCurrent === 0">
        <sub-title title="基础信息"> </sub-title>
        <OrderBasicDetail :basicData="form" />

        <view class="mt-20">
          <sub-title class="mt-20" title="设备信息"> </sub-title>
          <view class="p-lr-40 mb-20">
            <view class="fz-30 lh-42  mt-20 flex justify-between align-center">
              <text class="fz-32 color-FF6262 w-14">*</text>
              <text class="w-200 min-w-200 color-333333 font-bold">设备名称</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.deviceName || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-200 min-w-200 color-333333 font-bold pl-14">设备编号</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.deviceNo || '-' }}</text>
              </view>
            </view>
            <view class="fz-30 lh-42 mt-20 flex justify-between align-center">
              <text class="w-180 min-w-180 color-333333 font-bold pl-14">分组房间</text>
              <view class="flex1 text-right color-888888 break-all">
                <text>{{ form.roomName || '-' }}</text>
              </view>
            </view>
          </view>
          <view class="mt-20">
            <sub-title class="mt-20" title="故障内容"></sub-title>
            <view class="p-lr-40 mb-20">
              <view class="fz-30 lh-42 mt-20">
                <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">故障描述</text>
                <view class="break-all mt-10">
                  <text class="color-888888">{{ form.description || '暂无描述' }}</text>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 ">
                <text class="w-200 color-333333 font-bold">拍照</text>
                <view class="flex flex-wrap mt-20">
                  <!-- 图片缩略图 -->
                  <view class="relative mr-30" v-for="(item, index) in form.imageList" :key="index">
                    <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage" />
                  </view>

                  <view v-if="form.imageList.length === 0"
                        class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
                    <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
                    <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
                  </view>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 flex justify-between" >
                <text class="fz-32 color-FF6262 w-14">*</text><text class="w-200 color-333333 font-bold">报修人</text>
                <view class="flex1 flex text-right align-center justify-end color-888888">
                  <text>{{ form.initiator || '-' }}</text>
                </view>
              </view>

              <view class="fz-30 lh-42 mt-20 flex justify-between">
                <text class="w-200 color-333333 font-bold">报修时间</text>
                <view class="flex1 text-right">
                  <text class="color-888888">
                    {{ form.createTime || '-' }}
                  </text>
                </view>
              </view>
            </view>
          </view>

          <view class="mt-20" v-if="form.workOrderReason">
            <sub-title class="mt-20" title="求助原因"></sub-title>
            <view class="p-lr-40 mb-20">
              <view class="fz-30 lh-42 mt-20">
                <text class="w-200 color-333333 font-bold">求助原因</text>
                <view class="break-all mt-10">
                  <text class="color-888888">{{ form.workOrderReason || '-' }}</text>
                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
      <view class="mt-20" v-else-if="tabsCurrent === 1">
        <ChildFixDetail :workOrderInfo="form"/>
      </view>
    </view>
    <view v-if="showOperate && tabsCurrent===0" class="h-176 sticky bottom0 bg-fff pl-50 border-top-EEEEEE">
      <view class="flex align-center justify-end pt-30 pb-30">
        <view class="h-60 w-120 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 mr-50" @tap="transfer">
          <text>转派</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChildFixDetail from "@/pages/repair/components/child-fix-detail.vue"
import OrderBasicDetail from "../order-basic-detail.vue";

import SubTitle from "@/components/SubTitle/SubTitle";
import {workOrderDetail} from '@/api/repair/workOrder'

export default {
  name: "RepairWorkOrderSeekHelpInfo",
  components: {SubTitle, ChildFixDetail , OrderBasicDetail},
  props: {
    workOrderId: {
      type: String,
      required: true
    },
    showOperate: {
      type: Boolean,
      default: true
    },
    top: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      form: {},
      // 拒绝提示弹框
      isRejectModalShow: false,
      // 拒绝表单
      rejectForm: {
        workOrderId: '',
        reason: ''
      },
      tabsCurrent: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.resetForm()
      this.resetRejectForm()
      this.getDetail()
    },
    getDetail() {
      this.loading = true
      return workOrderDetail(this.workOrderId).then(res => {
        this.form = res.data
        this.loading = false
        return Promise.resolve(res)
      })
    },
    resetForm() {
      this.form = {
        companyId: "",
        companyName: "",
        content: null,
        createTime: "",
        departmentId: "",
        departmentName: "",
        description: "",
        deviceId: "",
        deviceName: "",
        deviceNo: "",
        endTime: null,
        handbook: null,
        hospitalId: "",
        hospitalName: "",
        imageList: [],
        initiator: "",
        initiatorUserId: "",
        recordId: null,
        recordImageList: null,
        recordPartList: null,
        repairStaff: null,
        responsibleStaff: null,
        responsibleStaffIds: null,
        roomName: "",
        staffIds: null,
        startTime: null,
        status: "0",
        handbook:'',
        workOrderId: this.workOrderId
      }
    },
    resetRejectForm() {
      this.rejectForm = {
        workOrderId: this.workOrderId,
        reason: ''
      }
    },
    changTabs(idx) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      })
      this.tabsCurrent = idx
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.form.imageList.map(el => el.url);
      uni.previewImage({
        current: current,
        urls: urls, //需要预览的图片链接列表
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
    //转派-路由跳转
    transfer() {
      const orderData = {
        responsibleStaffIds:this.form.responsibleStaffIds,
        responsibleStaff:this.form.responsibleStaff,
        repairStaff:this.form.repairStaff,
        staffIds:this.form.staffIds,
        handbook: this.form.handbook
      }
      this.$tab.navigateTo(`/pages/repair/receive-order?orderData=${encodeURIComponent(JSON.stringify(orderData))}&workOrderId=${ this.form.workOrderId }&companyId=${this.form.companyId}&hospitalId=${this.form.hospitalId}&isTransfer=${true}`)
    },
  }
}
</script>

<style lang="scss">
.edit {
  background: rgba(45, 140, 240, 0.1);
  border-radius: 5rpx;
  opacity: 1;
  border: 1rpx solid #2D8CF0;
  color: #2D8CF0;
}

/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}

/deep/ .u-collapse-head {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0 !important;
  padding-bottom: 30rpx !important;
  padding-top: 20rpx !important;
}
</style>
